<template>
  <div>
    <div class="order-dropdown-box">
      <span>时间：</span>
      <el-select
        v-model="selectTimeValue"
        @change="handleTimeZbId"
        style="width: 108px"
      >
        <el-option
          v-for="item in timeList"
          :key="item.zbId"
          :label="item.name"
          :value="item.zbId"
        />
      </el-select>
    </div>
    <el-table
      :data="tableData"
      empty-text="暂无数据"
      size="large"
      v-loading="listLoading"
      height="100%"
      class="order-table"
    >
      <el-table-column
        align="center"
        header-align="center"
        prop="code"
        label="兑换码"
        min-width="150"
      />
      <el-table-column
        align="center"
        header-align="center"
        prop="res_name"
        label="商品"
        min-width="140"
      >
        <template v-slot="scope">
          <span style="word-break: break-word">{{ scope.row.res_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="兑换时间"
        min-width="150"
      >
        <template v-slot="scope">
          {{ scope.row.exchange_time }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="状态"
        min-width="80"
      >
        <template v-slot="">已兑换</template>
      </el-table-column>
    </el-table>
    <el-pagination
      small
      hide-on-single-page
      class="order-pagination"
      :pager-count="5"
      layout="prev, pager, next"
      :page-size="pageSize"
      v-model:current-page="page"
      :total="total"
      @current-change="getList"
    />
  </div>
</template>
<script setup lang="ts" name="ExchangeTable">
import { defineProps, ref, computed, watch, onMounted, onActivated } from "vue";
import { useRoute } from "vue-router";
import { exchangeListApi } from "@/api/order";
import { storeToRefs } from "pinia";
import { messageAppStore } from "@/stores/message";
import { parseTime } from "@/utils";
const route = useRoute();
const _messageAppStore_ = messageAppStore();
const { exchangeFinishNotice } = storeToRefs(_messageAppStore_);
const props = defineProps({
  timeList: {
    type: Array,
    default: () => []
  }
});
const timeList = computed<any[]>(() => props.timeList);
const listLoading = ref(false);
const selectTimeItem = ref<any>({ name: "全部" });
const page = ref(1);
const pageSize = ref(20);
const total = ref(0);
const tableData = ref([]);
const selectTimeValue = ref(24002);
onActivated(() => {
  getList();
});
onMounted(() => {
  getList();
})
watch(exchangeFinishNotice, ()=>{
  if (route.name === "OrderList") {
    getList();
  }
});
function getList() {
  const params: any = {
    page: page.value,
    page_size: pageSize.value
  };
  if (selectTimeItem.value.begin_date) {
    params.begin_date = selectTimeItem.value.begin_date;
    params.end_date = selectTimeItem.value.end_date;
  }
  listLoading.value = true;
  exchangeListApi(params)
    .then((res) => {
      const data = res.data || {};
      tableData.value = (data.list || []).map((it: any) => {
        it.exchange_time = parseTime(
          it.exchange_time,
          "{y}-{m}-{d} {h}:{i}"
        );
        return it;
      });
      total.value = data.count;
    })
    .finally(() => {
      listLoading.value = false;
    });
}
function handleTimeZbId(zbId: string) {
  selectTimeItem.value = timeList.value.find((i: any) => i.zbId === zbId);
  page.value = 1;
  getList();
}
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
  padding: 0 14px;
  border-radius: 6px;
}
:deep(.el-input.is-focus .el-input__wrapper),
:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-input-border-color, var(--el-border-color))
    inset !important;
}
:deep(.el-table__cell .cell) {
  color: var(--el-text-color-primary);
}
:deep(.el-table__empty-text) {
  margin-top: 30px;
}
</style>
